<template>
    <div ref="barChart" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import {ref,reactive,onMounted, onUnmounted,getCurrentInstance,watch,nextTick,computed} from 'vue'
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
const barChart = ref(null); // 容器 DOM 引用
let chartInstance = null;   // ECharts 实例
const props = defineProps({
  data: Array,
});
watch(()=>props.data,()=>{
  if (!chartInstance && barChart.value) {
    chartInstance = echarts.init(barChart.value);
    window.addEventListener('resize', handleResize);
  }
  chartInstance?.setOption(options.value);
},{deep:true})
const options = computed(()=>({
  title: {
        //   text: "(%)",
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
          left: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor:'rgba(23,47,73,0.8)',
              borderColor:'#41ACFF',
              textStyle:{
                color: "#FFFFFF"
              }
        },
        /**区域位置*/
        grid: {
          top: "15%",
          left: "16%",
          right: "10%",
          bottom: "19%",
        },
        //X轴
        xAxis: {
          data:props.data?.map(_=> _.name),
          type: "category",
          axisLabel: {
            interval: 0,
            rotate: 45,
            textStyle: {
              color: "#fff",
              fontSize: 13,
            },
          },
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#fff",
            fontSize: 14,
            padding: [0, 44, -2, 0],
          },
          show: true,
          splitNumber: 4,
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "次数",
            type: "bar",
            color: "#00A3FF",
            barWidth: 14,
            itemStyle: {
              normal: {
                color: new  proxy.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(98, 140, 255, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(54, 108, 255, 0.90)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                // barBorderRadius: [30, 30, 0, 0],
              },
            },
            data: props.data?.map(_=> _.count),
          },
        ],
}))

const handleResize = () => chartInstance.resize();

onMounted(() => {
  nextTick(()=>{
    if (barChart.value && !chartInstance) {
      chartInstance = echarts.init(barChart.value);
      chartInstance.setOption(options.value);
      window.addEventListener('resize', handleResize);
    }
  })
});
onUnmounted(() => {
     window.removeEventListener('resize', handleResize);
     chartInstance.dispose();
   });
 
</script>

<style lang="scss" scoped>

</style>